<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>zepto版slider动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/slider.css">
</head>

<body>
    <div id="slider-title" class="slider-title" node-type="slider-contenter" user-setting='{
    "autoAnimate": true,
    "btnShow": true,
    "btnShow": true,
    "changeTime": 4000,
    "animateTime":500,
    "sweepTime": 400
}'>
        <div class="slider-btn" node-type="btn-contenter">
            <ul>
                <li class="current-btn" node-type="btn-list"><a class="li-href" href="#">1</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">2</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">3</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">4</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">5</a></li>
            </ul>
        </div>
        <ul class="slider_ul clearfix" node-type="img-contenter">
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/1.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/2.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/3.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/4.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/5.jpg"></a>
            </li>
        </ul>
    </div>
    <div id="slider-title" class="slider-title" node-type="slider-contenter" user-setting='{
    "autoAnimate": true,
    "btnShow": true,
    "btnShow": true,
    "changeTime": 4000,
    "animateTime":500
}'>
        <div class="slider-btn" node-type="btn-contenter">
            <ul>
                <li class="current-btn" node-type="btn-list"><a class="li-href" href="#">1</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">2</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">3</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">4</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">5</a></li>
            </ul>
        </div>
        <ul class="slider_ul clearfix" node-type="img-contenter">
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/1.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/2.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/3.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/4.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/5.jpg"></a>
            </li>
        </ul>
    </div>
    <div id="slider-title" class="slider-title" node-type="slider-contenter" user-setting='{
    "autoAnimate": true,
    "btnShow": true,
    "btnShow": true,
    "changeTime": 4000,
    "animateTime":500
}'>
        <div class="slider-btn" node-type="btn-contenter">
            <ul>
                <li class="current-btn" node-type="btn-list"><a class="li-href" href="#">1</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">2</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">3</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">4</a></li>
                <li node-type="btn-list"><a class="li-href" href="#">5</a></li>
            </ul>
        </div>
        <ul class="slider_ul clearfix" node-type="img-contenter">
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/1.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/2.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/3.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/4.jpg"></a>
            </li>
            <li node-type="img-list">
                <a class="li-href" href="#"><img src="img/5.jpg"></a>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="common/zepto.js"></script>
    <script type="text/javascript" src="js/zepto-slider.js"></script>
    <script>
        $(function() {
            window.SliderImgFunc.init($('[node-type=slider-contenter]'));
        });
    </script>
</body>

</html>
